<script lang="ts" setup>
import indexText from "./index.json"
import {onMounted, ref, watch} from "vue";
import { requestNewCD } from "../../../utils/axiosURL"


// 分类下标
let cateIndex = ref<number>(0)
// 请求code
let requestCode = ref<string>('0')
// 右侧下标
let rightIndex = ref<number>(0)
// 右侧请求code
let rightCode = ref<string>('hot')
// 新碟上架数据(周)
let NewCDShelfData = ref<any>([])

const changeIndexCodeFn = (index: number, code: string) => {
  cateIndex.value = index
  requestCode.value = code
}
const handleRightFn = (index: number, code: string) => {
  rightIndex.value = index
  rightCode.value = code
}

// 请求新碟上架数据
const requestNewCDFn = () => {
  requestNewCD(requestCode.value, rightCode.value).then((data: any) => {
    NewCDShelfData.value = data.weekData ?? data.monthData
  }).catch(_ => { })
}
onMounted(() => {
  requestNewCDFn()
})
watch([requestCode, rightCode],() => requestNewCDFn())

</script>

<template>
  <div class="newCDWrap">
    <div class="topCate">
      <div class="leftCate">
        <ul>
          <li
              v-for="(item, index) in indexText.cateArr"
              :class="cateIndex === index ? 'active' : ''"
              @click="() => changeIndexCodeFn(index, item.code)"
          >{{ item.name }}</li>
        </ul>
      </div>
      <div class="rightWrap">
        <div class="playAll"
             v-for="(item, index) in indexText.rightArr"
             @click="handleRightFn(index, item.code)"
             :class="rightIndex === index ? 'active' : ''"
        >
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>
    <div class="zeroState">
      <div class="albumItem"
           v-if="NewCDShelfData.length"
           v-for="item in NewCDShelfData">
        <div class="itemTop">
          <div class="img_Wrap">
            <RouterLink :to="{path: `/AlbumDetail/${item.id}`, query: {url: item.picUrl, name: item.name, time: item.publishTime, singerName: item.artist.name}}">
              <img :src="item.picUrl" alt="">
            </RouterLink>
          </div>
          <div class="pseudo">
            <div class="pseudo_cir"></div>
          </div>
        </div>
        <div class="itemBtm">
          <RouterLink :to="{path: `/AlbumDetail/${item.id}`, query: {url: item.picUrl, name: item.name, time: item.publishTime, singerName: item.artist.name}}">
            {{ item.name }}
          </RouterLink>
        </div>
      </div>
      <GlobalListItemSkeleton v-else v-for="item in 15" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.newCDWrap {
  width: 100%;

  .topCate {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 40px;
    padding-right: 30px;
    box-sizing: border-box;

    .leftCate {
      ul {
        display: flex;

        li {
          margin-right: 20px;
          font-size: $font-size-sm;
          color: $font_second_color;
          font-family: $textFont;
        }

        .active {
          font-size: 15px;
          font-family: $activeTextFont;
          color: #000;
        }
      }
    }

    .rightWrap {
      display: flex;
      justify-content: end;

      .playAll {
        font-size: $font-size-sm;
        color: $font_main_color;
        font-family: $textFont;
        border-radius: 25px;
        padding: 3px 15px 1px;
        cursor: pointer;

        .icon-yunhang {
          vertical-align: -2px;
          margin-right: 4px;
        }
      }

      .active {
        // color: $font_red_color;
        // background-color: rgb(254,245,245);
        @include color('color');
        @include background_color('bk_color');
      }
    }
  }

  .zeroState {
    display: flex;
    flex-wrap: wrap;

    .albumItem {
      width: 22%;
      margin: 0 22px 15px 0;

      .itemTop {
        display: flex;
        width: 100%;
        overflow: hidden;

        .img_Wrap {
          flex-basis: 70%;
          width: 70%;
          min-height: 120px;

          img {
            width: 100%;
            height: 100%;
            border-radius: 8px;
          }
        }

        .pseudo {
          position: relative;
          flex: 1;

          .pseudo_cir {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;

            &::after {
              position: absolute;
              top: 0;
              right: 0;
              bottom: 0;
              left: -170px;
              margin: auto;
              content: "";
              width: 150px;
              height: 150px;
              background: repeating-radial-gradient(
                      #252525 6px,
                      #000 10px
              );
              border-radius: 50%;
            }
          }

          &::before {
            z-index: 1;
            content: "";
            position: absolute;
            top: 6px;
            left: 0;
            width: 0;
            height: 30%;
            border-style: solid solid solid solid;
            border-width: 6px 0px 6px 6px;
            border-color: rgba(218, 214, 215, 0.28) transparent transparent rgba(218, 214, 215, 0.28);
            border-radius: 4px;
          }

          &::after {
            content: "";
            position: absolute;
            bottom: 6px;
            left: 0;
            width: 0;
            height: 30%;
            border-style: solid solid solid solid;
            border-width: 6px 0px 6px 6px;
            border-color: transparent transparent rgba(218, 214, 215, 0.28) rgba(218, 214, 215, 0.28);
            border-radius: 4px;
          }
        }
      }

      .itemBtm {
        line-height: 25px;
        font-size: $font-size-sm;
        font-family: $textFont;
        color: $font_main_color;
      }
    }
  }
}

:deep(.el-skeleton__item) {
  width: 100%;
}
</style>
